<!doctype html>
<html class="default no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>DimensioningLink | GoJS API</title>
	<meta name="description" content="Documentation for GoJS API">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../../assets/css/style.css">
	<link rel="stylesheet" href="../assets/css/main.css">
	<script async src="../assets/js/search.js" id="search-script"></script>
</head>
<body>
<header>
	<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
		<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
			<div class="md:pl-4">
				<a class="text-white hover:text-white no-underline hover:no-underline
				font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html">
				<h1 class="mb-0 p-1 leading-none">GoJS</h1>
				</a>
			</div>
			<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
				<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
					<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
					<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
				</svg>
			</button>
			<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
				<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
					target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
					target="_blank"rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
				</ul>
			</div>
		</div>
		<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
	</nav>
	<div class="tsd tsd-page-header">
		<div class="tsd-page-toolbar">
			<div class="w-full max-w-screen-xl mx-auto px-2">
				<div class="table-wrap">
					<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
						<div class="field">
							<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
							<input id="tsd-search-field" type="text" />
						</div>
						<ul class="results">
							<li class="state loading">Preparing search index...</li>
							<li class="state failure">The search index is not available</li>
						</ul>
						<a href="../index.html" class="title">GoJS API</a>
					</div>
					<div class="table-cell" id="tsd-widgets">
						<div id="tsd-filter">
							<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
							<div class="tsd-filter-group">
								<div class="tsd-select" id="tsd-filter-visibility">
									<span class="tsd-select-label">All</span>
									<ul class="tsd-select-list">
										<li data-value="public">Public</li>
										<li data-value="protected">Public/Protected</li>
										<li data-value="private" class="selected">All</li>
									</ul>
								</div>
							</div>
						</div>
						<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
					</div>
				</div>
			</div>
		</div>
		<div class="tsd tsd-page-title">
			<div class="w-full max-w-screen-xl mx-auto px-2">
				<div class="top-copyright">
					<b>GoJS</b>&reg; Diagramming Components<br/>version 2.1.56<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
				</div>
				<div>
					<h1>Class DimensioningLink</h1>
				</div>
			</div>
		</div>
	</div>
</header>
<div class="tsd w-full max-w-screen-xl mx-auto pb-4">
	<div class="row px-2 w-full">
		<div class="col-8 col-content">
			<section class="tsd-panel tsd-extension">
				<p>
					This is an extension and not part of the main GoJS library.
					Note that the API for this class may change at any time.
					If you intend to use an extension in production, you should copy the code to your own source directory.
					Extensions can be found in the GoJS kit under the <code>extensions</code>,
					<code>extensionsTS</code> (UMD modules), or <code>extensionsJSM</code> (ES6 modules) folders.
					See the <a href="../../intro/extensions.html">Extensions intro page</a> for more information.
				</p>
			</section>
			<section class="tsd-panel tsd-hierarchy">
				<h3>Hierarchy</h3>
				<ul class="tsd-hierarchy">
					<li>
						<a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a>
						<ul class="tsd-hierarchy">
							<li>
								<a href="Panel.html" class="tsd-signature-type" data-tsd-kind="Class">Panel</a>
								<ul class="tsd-hierarchy">
									<li>
										<a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a>
										<ul class="tsd-hierarchy">
											<li>
												<a href="Link.html" class="tsd-signature-type" data-tsd-kind="Class">Link</a>
												<ul class="tsd-hierarchy">
													<li>
														<span class="target">DimensioningLink</span>
													</li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</section>
			<section class="tsd-panel tsd-comment">
				<div class="tsd-comment tsd-typography">
					<p>A custom routed <a href="Link.html">Link</a> for showing the distances between a point on one node and a point on another node.</p>
					<p>Note that because this is a Link, the points being measured must be on <a href="Node.html">Node</a>s, not simple <a href="Part.html">Part</a>s.
					The exact point on each Node is determined by the <a href="Link.html#fromSpot">Link.fromSpot</a> and <a href="Link.html#toSpot">Link.toSpot</a>.</p>
					<p>Several properties of the DimensioningLink customize the appearance of the dimensioning:
						<a href="DimensioningLink.html#direction">direction</a>, for orientation of the dimension line and which side it is on,
						<a href="DimensioningLink.html#extension">extension</a>, for how far the dimension line is from the measured points,
						<a href="DimensioningLink.html#inset">inset</a>, for leaving room for a text label, and
					<a href="DimensioningLink.html#gap">gap</a>, for distance that the extension line starts from the measured points.</p>
					<p>If you want to experiment with this extension, try the <a href="../../extensionsJSM/Dimensioning.html">Dimensioning</a> sample.</p>
				</div>
			</section>
			<section class="tsd-panel-group tsd-index-group">
				<h2>Index</h2>
				<section class="tsd-panel tsd-index-panel">
					<div class="tsd-index-content">
						<section class="tsd-index-section ">
							<h3>Constructors</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a href="DimensioningLink.html#constructor" class="tsd-kind-icon">constructor</a></li>
							</ul>
						</section>
						<section class="tsd-index-section ">
							<h3>Properties</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DimensioningLink.html#direction" class="tsd-kind-icon">direction</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DimensioningLink.html#extension" class="tsd-kind-icon">extension</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DimensioningLink.html#gap" class="tsd-kind-icon">gap</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DimensioningLink.html#inset" class="tsd-kind-icon">inset</a></li>
							</ul>
						</section>
						<section class="tsd-index-section ">
							<h3>Methods</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="DimensioningLink.html#cloneProtected" class="tsd-kind-icon">clone<wbr>Protected</a></li>
								<li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="DimensioningLink.html#computePoints" class="tsd-kind-icon">compute<wbr>Points</a></li>
							</ul>
						</section>
					</div>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Constructors</h2>
				<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite">
					<a name="constructor" class="tsd-anchor"></a>
					<h3>
						constructor
					</h3>
					<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite">
						<li class="tsd-signature tsd-kind-icon">new <wbr>Dimensioning<wbr>Link<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="DimensioningLink.html" class="tsd-signature-type" data-tsd-kind="Class">DimensioningLink</a></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Constructs a DimensioningLink and sets the following properties:</p>
								<ul>
									<li><a href="Part.html#isLayoutPositioned">isLayoutPositioned</a> = false</li>
									<li><a href="Link.html#isTreeLink">isTreeLink</a> = false</li>
									<li><a href="Link.html#routing">routing</a> = <a href="Link.html#static-Orthogonal">Link.Orthogonal</a></li>
								</ul>
							</div>
							<h4 class="tsd-returns-title">Returns <a href="DimensioningLink.html" class="tsd-signature-type" data-tsd-kind="Class">DimensioningLink</a></h4>
						</li>
					</ul>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Properties</h2>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="direction" class="tsd-anchor"></a>
					<h3>
						direction
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>The general angle at which the measurement should be made.</p>
								<p>The default value is 0, meaning to go measure only along the X axis,
									with the dimension line and label above the two nodes (at lower Y coordinates).
									New values must be one of: 0, 90, 180, 270, or NaN.
								The value NaN indicates that the measurement is point-to-point and not orthogonal.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="extension" class="tsd-anchor"></a>
					<h3>
						extension
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>The distance at which the dimension line should be from the points being measured.</p>
								<p>The default value is 30.
									Larger values mean further away from the nodes.
								The new value must be greater than or equal to zero.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="gap" class="tsd-anchor"></a>
					<h3>
						gap
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>The distance that the extension lines should come short of the measured points.</p>
								<p>The default value is 10.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="inset" class="tsd-anchor"></a>
					<h3>
						inset
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>The distance that the dimension line should be &quot;indented&quot; from the ends of the
								extension lines that are orthogonal to the dimension line.</p>
								<p>The default value is 10.</p>
							</div>
						</li>
					</ul>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Methods</h2>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-overwrite">
					<a name="cloneProtected" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagOverride">Override</span>
						clone<wbr>Protected
					</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-overwrite">
						<li class="tsd-signature tsd-kind-icon">clone<wbr>Protected<span class="tsd-signature-symbol">(</span>copy<span class="tsd-signature-symbol">: </span><a href="DimensioningLink.html" class="tsd-signature-type" data-tsd-kind="Class">DimensioningLink</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Copies properties to a cloned DimensioningLink.</p>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>copy: <a href="DimensioningLink.html" class="tsd-signature-type" data-tsd-kind="Class">DimensioningLink</a></h5>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-overwrite">
					<a name="computePoints" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagOverride">Override</span>
						compute<wbr>Points
					</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-overwrite">
						<li class="tsd-signature tsd-kind-icon">compute<wbr>Points<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Constructs the link&#39;s route by modifying <a href="Link.html#points">points</a>.</p>
							</div>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
							<p>true if it computed a route of points</p>
						</li>
					</ul>
				</section>
			</section>
		</div>
		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
			<nav class="tsd-navigation primary">
				<ul>
					<li class=" ">
						<a href="../index.html">GoJS <wbr>Class <wbr>Index</a>
					</li>
				</ul>
			</nav>
			<nav class="tsd-navigation secondary menu-sticky">
				<ul class="before-current">
				</ul>
				<ul class="current">
					<li class="current tsd-kind-class tsd-is-extension">
						<a href="DimensioningLink.html" class="tsd-kind-icon">Dimensioning<wbr>Link</a>
						<ul>
							<li class=" tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite">
								<a href="DimensioningLink.html#constructor" class="tsd-kind-icon">constructor</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="DimensioningLink.html#direction" class="tsd-kind-icon">direction</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="DimensioningLink.html#extension" class="tsd-kind-icon">extension</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="DimensioningLink.html#gap" class="tsd-kind-icon">gap</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="DimensioningLink.html#inset" class="tsd-kind-icon">inset</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-overwrite">
								<a href="DimensioningLink.html#cloneProtected" class="tsd-kind-icon">clone<wbr>Protected</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-overwrite">
								<a href="DimensioningLink.html#computePoints" class="tsd-kind-icon">compute<wbr>Points</a>
							</li>
						</ul>
					</li>
				</ul>
				<ul class="after-current">
				</ul>
			</nav>
		</div>
	</div>
</div>
<div class="tsd w-full max-w-screen-xl mx-auto px-2">
	<div class="bottom-copyright">Copyright &copy; 1998-2021 by Northwoods Software Corporation.</div>
</div>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date()); gtag('config', 'UA-1506307-5');
  var getOutboundLink = function(url, label) {
    gtag('event', 'click', {
      'event_category': 'outbound',
      'event_label': label,
      'transport_type': 'beacon'
    });
  }

  // topnav
  var topButton = document.getElementById("topnavButton");
  var topnavList = document.getElementById("topnavList");
  topButton.addEventListener("click", function() {
    this.classList.toggle("active");
    topnavList.classList.toggle("hidden");
    document.getElementById("topnavOpen").classList.toggle("hidden");
    document.getElementById("topnavClosed").classList.toggle("hidden");
  });
</script>
</body>
</html>